<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="swiper-3.4.0.min.css" />
		<title>我的Rendering</title>
		<style type="text/css">
			html,
			body,
			ul,
			li {
				margin: 0;
				padding: 0;
				font-family: arial;
			}
			
			body {
				width: 100%;
				height: 100%;
				
			}
			
			ul,
			li {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			#top {
				height: 66px;
				width: 100%;
				position: relative;
				top: 0;
				background-color: black;
				z-index: 111;
			}
			
			#top-wrap {
				max-width: 1128px;
				height: 66px;
				margin: 0 auto;
				position: relative;
			}
			
			#top-logo {
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
			}
			
			#top-wrap a {
				list-style: none;
				text-decoration: none;
			}
			
			#nav-wrap {
				float: right;
				margin-top: 20px;
			}
			
			#nav-wrap a {
				color: rgba(255, 255, 255, 0.5);
				display: inline-block;
				font-family: arial;
				margin-right: 30px;
				padding: 4px 9px;
				border: 1px solid black;
				border-radius: 5px;
			}
			
			#nav-wrap .sty {
				color: white;
				border-color: white;
			}
			
			#img-nav {
				position: absolute;
				width: 22px;
				height: 20px;
				top: 0;
				bottom: 0;
				margin: auto;
				right: 30px;
				display: none;
			}
			
			#nav-sun {
				width: 245px;
				height: 220px;
				padding-top: 10px;
				background-color: #cfdb00;
				position: absolute;
				right: 0;
				text-align: center;
				display: none;
			}
			
			#nav-sun a {
				display: inline-block;
				border: 1px solid black;
				margin-bottom: 10px;
				padding: 2px;
				border-radius: 5px;
				color: black;
				font-size: 18px;
			}
			/**/
			
			.swiper-container {
			width: 100%;
			height: 100%;
		}			
			 .swiper-slide img{
			 	width: 100%;
			 	
			 }
			
			.swiper-pagination-bullet {
				background-color: gray;
				opacity: 1;
			}
			
			.swiper-pagination-bullet-active {
				background-color: greenyellow;
			}
			#main{
				margin-top: 5px;
				width: 100%;
				height: 100%;
			}
			/**************************/
			#wrap{
				width: 100%;
				
				margin: 0 auto;
				overflow: hidden;
			}
			#wrap ul{
				list-style: none;
				float: left;
				width: 25%;
				padding: 5px;
				box-sizing: border-box;
			}
			#wrap li{
				width: 100%;
				position: relative;
				margin-bottom: 5px;
			}
			li img{
				width: 100%;
			}
			.gla{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;left: 0;
				
				margin: auto;
				background-color: rgba(0,0,0,0.5);
				opacity: 0;
			}
			.gla img{
				width: 12%;
				
				position: absolute;
				top: 0;left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
			
			#img_wrap img{
				width: 100%;
			}
			#img_wrap{
				width: 738px;
				position: fixed;
				display: inline-block;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				padding: 10px;
				background-color: rosybrown;
				display: none;
				z-index: 2;
				
			}
			#bgc{
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				z-index: 3;
				display: none;
			}
			
			
			
			#foot{
				height: 100px;
				width: 100%;
				margin-top: 50px;
				text-align: center;
				position: relative;
				margin-bottom: 100px;
			}
			#foot img{
				width: 25px;
				height: 25px;
				margin: 2px;
			}
			.foot-txt{
				font-size: 12px;
				color: #838383;
				position: absolute;
				font-family: "微软雅黑";
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			#foot #img_1{
				height: 19px;
				margin-bottom: 5px;
			}
		</style>
	</head>

	<body>
		<div id="top">
			<div id="top-wrap">
				<a href="01.Home.html"><img id="top-logo" src="img1/shininglogo.png" /></a>
				<div id="nav-wrap">
					<a href="01.Home.html">Home</a>
					<a href="02.About.html">About</a>
					<a href="03.Readering.html">Rendering</a>
					<a href="04.3DAnimaition.html">3D Animation</a>
					<a href="05.Bim.html">Bim</a>
					<a href="06.Contact.html">Contact</a>
				</div>
			</div>
			<img id="img-nav" src="img1/top-nav.png" />
			<div id="nav-sun">
				<a href="01.Home.html">Home</a><br />
				<a href="02.About.html">About</a><br />
				<a href="03.Readering.html">Rendering</a><br />
				<a href="04.3DAnimaition.html">3D Animation</a><br />
				<a href="05.Bim.html">Bim</a><br />
				<a href="06.Contact.html">Contact</a>
			</div>
		</div>

		<div id="auto" class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img3/Banner (1).jpg" /></div>
				<div class="swiper-slide"><img src="img3/Banner (2).jpg" /></div>
				<div class="swiper-slide"><img src="img3/Banner (3).jpg" /></div>

			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

		</div>

		<div id="main">
			<div id="wrap">
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
			
			</div>
		</div>
		<div id="foot">
			<a href="">
			<img id="img_1" src="img1/2Q==.jpg" /><br />
			<img src="img1/9k=.jpg"/>
			<img src="img1/2Q==-3.jpg"/>
			<img src="img1/2Q==-1.jpg"/>
			<img src="img1/9k=-2.jpg"/>
			
			</a>
			<div class="foot-txt">Copyright © 1998-2015 shining Group</div>
		</div>
		<div id="bgc">
			<div id="img_wrap" >
				<img id="aaa" src=""/>
			</div>
		</div>
		<script src="jquery.min.js"></script>
		<script src="swiper-3.4.0.min.js" type="text/javascript"></script>
		<script>
			$(function() {
				//导航
				$("#nav-wrap a:eq(2)").css({
					"color": "white",
					"borderColor": "#80806c"
				})
				$("#nav-wrap a").on("mouseover", function() {
					$(this).css({
						"color": "white",
						"borderColor": "#80806c"
					});
				});
				$("#nav-wrap a:gt(2)").on("mouseout", function() {
					$(this).css({
						"color": "",
						"borderColor": ""
					});
				});
				$("#nav-wrap a:lt(2)").on("mouseout", function() {
					$(this).css({
						"color": "",
						"borderColor": ""
					});
				});
				$("#img-nav").click(function() {
					$("#nav-sun").toggle("slow");
				})
				if($(window).width() <= 1020) {
					$("#img-nav").css("display", "block")
					$("#nav-wrap").css("display", "none")
				}
				window.onresize = function() {
					if($(window).width() <= 1020) {
						$("#img-nav").css("display", "block")
						$("#nav-wrap").css("display", "none")
					} else {
						$("#img-nav").css("display", "none")
						$("#nav-wrap").css("display", "block")
						$("#nav-sun").css("display", "none")

					}
				}

				$("#auto").on("mouseover", function() {
					mySwiper.stopAutoplay();
				})
				$("#auto").on("mouseout", function() {
					mySwiper.startAutoplay();
				})
				var mySwiper = new Swiper('.swiper-container', {
					effect: 'fade',
					loop: true,
					// 如果需要分页器
					pagination: '#swiper-pagination1',
					// 如果需要前进后退按钮

					autoplay: 1000,
					speed: 300,
					pagination: '.swiper-pagination',
					paginationClickable: true,
					simulateTouch: false,
				})
				
			
				
			});
				var images =["img3/01.jpg","img3/02.jpg","img3/03.jpg","img3/04.jpg","img3/05.jpg","img3/06.jpg"
			,"img3/07.jpg","img3/08.jpg","img3/09.jpg","img3/10.jpg","img3/11.jpg","img3/12.jpg","img3/13.jpg"
			,"img3/14.jpg","img3/15.jpg","img3/16.jpg","img3/17.jpg","img3/18.jpg","img3/19.jpg","img3/20.jpg"
			,"img3/21.jpg","img3/22.jpg","img3/23.jpg","img3/24.jpg","img3/25.jpg","img3/26.jpg","img3/27.jpg","img3/28.jpg"
			,"img3/29.jpg","img3/30.jpg","img3/31.jpg","img3/32.jpg","img3/33.jpg","img3/34.jpg","img3/35.jpg"
			,"img3/36.jpg","img3/37.jpg","img3/38.jpg","img3/39.jpg","img3/40.jpg","img3/09.jpg","img3/29.jpg","img3/23.jpg"];
			
			var oUls = document.getElementsByTagName("ul");
				
				var imgCount=40;
				for(var i=0;i<images.length;i++){
					var newimg = new Image();
					//创建一个新的li
					var newli = document.createElement("li");
					newli.className ="galss";
					newimg.className = "img"
					newimg.src = images[i]
					newli.appendChild(newimg);
					//设置li的高度
//					newli.style.height = getRandom(150,300)+"px";
					
					//获取当前所有列的高度
					var ulH = [];
					for(var j=0;j<oUls.length;j++){
						ulH[j] = oUls[j].offsetHeight;
					}
					// 获取最短的列
					var minH = ulH[0];
					var minIndex = 0;
					for(var j=0;j<ulH.length;j++){
						if(minH>ulH[j]){
							minH = ulH[j];
							minIndex = j;
						}
					}
					//添加当前li
					oUls[minIndex].appendChild(newli);
				}
				//随机函数
				function getRandom(min,max){
					return Math.floor(Math.random()*(max-min+1)+min);
				}
				
				$("li").append("<div class='gla'></div>");
				$(".gla").append($("<img>").attr("src","img3/view.png"));
				$("li").on("mouseenter",function(){
					$(this).find(".gla").animate({"opacity":"1"})
				})
				$("li").on("mouseleave",function(){
					$(this).find(".gla").animate({"opacity":"0"},20)
				})
				$("li").on("click",function(){
					var j = $(this).find(".img").attr("src");
					$("#aaa").attr("src",j).on("load",function(){
						var H = $(this).height();
						$("#img_wrap").css("height",H);
					});
				
					$("#img_wrap").css("display","block");
					$("#bgc").css("display","block")
				})
				
				$("#bgc").on("click",function(){
						$("#img_wrap").css("display","none");
						$("#bgc").css("display","none");
					})
				
				$("#foot img:eq(0)").on("mouseover",function(){$(this).attr("src","img1/Z.jpg")});
				$("#foot img:eq(0)").on("mouseout",function(){$(this).attr("src","img1/2Q==.jpg")});
				
				$("#foot img:eq(1)").on("mouseover",function(){$(this).attr("src","img1/9k=-1.jpg")});
				$("#foot img:eq(1)").on("mouseout",function(){$(this).attr("src","img1/9k=.jpg")});
				
				$("#foot img:eq(2)").on("mouseover",function(){$(this).attr("src","img1/Z-2.jpg")});
				$("#foot img:eq(2)").on("mouseout",function(){$(this).attr("src","img1/2Q==-3.jpg")});
				
				$("#foot img:eq(3)").on("mouseover",function(){$(this).attr("src","img1/2Q==-2.jpg")});
				$("#foot img:eq(3)").on("mouseout",function(){$(this).attr("src","img1/2Q==-1.jpg")});
				
				$("#foot img:eq(4)").on("mouseover",function(){$(this).attr("src","img1/Z-1.jpg")});
				$("#foot img:eq(4)").on("mouseout",function(){$(this).attr("src","img1/9k=-2.jpg")});
				
				
				
				
			
		</script>
	</body>

</html>